{extend name="common@public/base" /}

{block name="title"}
<title>{$titles}文章 - {:confv('title')}</title>
<meta name="keywords" content="{$titles}文章">
<meta name="description" content="{$titles}文章">
{/block}

{block name="pjax_container"}
<div class="content">
    <div class="row">
        <div class="col-sm-8" >

            <div class="box box-primary">
                <div class="box-header with-border">
	              	<h3 class="box-title">{$titles}文章</h3>
	            </div>
	            <form class="form-horizontal" method="POST" action="" onsubmit="return false">
					<input type="hidden" name="id" value="{$data['id']}">
            		<input type="hidden" name="mod" value="addonarticle">
            		<input type="hidden" name="writer" value="{$user['id']}">
            		<input type="hidden" name="litpic" value="{$data['litpic']}">
                    <div class="box-body">
                    	<div class="form-group">
					        <label class="col-sm-2 control-label">所属分类</label>
					        <div class="col-sm-10">
					            <select class="form-control select2 select2-hidden-accessible" name="typeid" style="width:100%;" tabindex="-1" aria-hidden="true">
					                <option value="">选择分类</option>
					                {volist name="$arclist" id="vo"}
					                <option value="{$vo['id']}" {eq name="$data['typeid']" value="$vo['id']"}selected="selected" {/eq}>{$vo['typename']}</option>
					                {/volist}
					            </select>
					        </div>
					    </div>

					    <div class="form-group">
					        <label class="col-sm-2 control-label">标题</label>
					        <div class="col-sm-10"><input class="form-control" name="title" value="{$data['title']}" placeholder="标题"></div>
					    </div>
					    <div class="form-group">
					        <label class="col-sm-2 control-label">缩略图</label>
					        <div class="col-sm-10" >
				        		<div class="">
				        			{empty name="$user"}
				        			<span id="" class="x-mr-10 btn btn-success"onclick="poplogin()">请登录</span>
				        			{else /}
				        			<span id="uploader-btn" class="x-mr-10 btn btn-xs"><i class="fa fa-plus"></i></span>
				        			{/empty}
				        		</div>
				        		<div id="uploader-imglist">
				        			<div class="text-muted x-f12 x-mb-5">只能上传一张图片,点击图片删除</div>
				        			{notempty name="$data['litpic']"}
					        			<div id="imgid_{$data['id']}" class="thumbnail x-mb-0 pull-left x-mr-5 x-dwr">
											<img width="100" height="100" src="{$data['litpic']}" class="">
											<button data-fid="imgid_{$data['id']}" type="button" class="scimg btn btn-danger btn-xs x-dwa-rt">删除</button>
										</div>
									{/notempty}
				        		</div>
					        </div>
					    </div>
					    <div class="form-group">
					        <label class="col-sm-2 control-label">简介</label>
					        <div class="col-sm-10"><textarea class="form-control" style="resize:none;height:130px;" name="description" placeholder="简介">{$data['description']}</textarea></div>
					    </div>
					    <div class="form-group">
					        <label class="col-sm-2 control-label">内容</label>
					        <div class="col-sm-10"><textarea class="form-control tty" name="content" placeholder="内容">{$data['addonarticle']['content']}</textarea></div>
					    </div>

                    </div>

                    <div class="box-footer">
                        <div class="col-sm-2"></div>
                        <div class="col-sm-7">
                            <div class="btn-group pull-right">
                            	<button type="submit" class="submits x-yc">{$titles}</button>
                                <button type="submit" class="btn btn-info pull-right shangchuan" data-loading-text="<i class='fa fa-spinner fa-spin '></i> 提交">提交</button>
                            </div>
                            <div class="btn-group pull-left">
                                <button type="reset" class="btn btn-warning">撤销</button>
                            </div>
                        </div>
                    </div>
				</form>
            </div>

        </div>

        <div class="col-sm-4" >
            {include file="index@inc/right" /}
        </div>

    </div>
</div>

<script>
$(function() {

	//编辑器
    KindEditor.create('textarea[name="content"]',{
        width : '100%',   //宽度
        height : '350px',   //高度
        resizeType : '1',   //禁止拖动
        allowFileManager : false,   //允许对上传图片进行管理
        allowFlashUpload : false,	//true时显示Flash上传按钮。
        allowMediaUpload : false,	//true时显示视音频上传按钮。
        allowFileUpload : false,	//true时显示文件上传按钮。
        allowImageUpload: false,	//true时显示图片上传按钮。
        allowFlashUpload : false,	//true时显示Flash上传按钮。
        allowMediaUpload : false,	//true时显示视音频上传按钮。
        allowFileUpload : false,	//true时显示文件上传按钮。
        uploadJson : '{:url("Uploads/upload")}',   //文件上传地址
        fileManagerJson : '{:url("Uploads/manager")}',   //文件管理地址
        //urlType : 'domain',   //带域名的路径
        formatUploadUrl: true,   //自动格式化上传后的URL
        autoHeightMode: false,   //开启自动高度模式
        afterBlur: function () { this.sync(); }   //同步编辑器数据
    });

    //上传
    var $list = $('#uploader-imglist'),     //预览列表
    ratio = window.devicePixelRatio || 1,	// 优化retina, 在retina下这个值是2
    thumbnailWidth = 100 * ratio,	// 缩略图大小
    thumbnailHeight = 100 * ratio,
    uploader,	// Uploader实例
    sc_num = 1;	//允许上传图片数量

    uploader = WebUploader.create({	// 初始化Web Uploader
        pick: '#uploader-btn',	// 选择文件的按钮。可选。
        auto: false,// 自动上传。
        swf: '__static__/common/uploader/Uploader.swf',	// swf文件路径
        server: '{:url("index/Uploads/upload")}',	// 文件接收服务端。
        formData:{'dir':'image'},	//发送的参数
        fileNumLimit: sc_num,	//允许上传图片数量
        accept: {	// 只允许选择文件，可选。
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/*'
        }
    });
    // 当文件被加入队列以后触发。
    uploader.on( 'fileQueued', function( file ) {
        var $li = $(
                '<div id="' + file.id + '" class="thumbnail x-mb-0 pull-left x-mr-5 x-dwr">' +
                    '<img >' +
                    '<button data-fid="' + file.id + '" type="button" class="scimg btn btn-danger btn-xs x-dwa-rt">删除</button>'+
                '</div>'
               ),
            $img = $li.find('img');
        $('#uploader-imglist').off('click', '.scimg');
		$li.on('click', '.scimg', function() {
			BootstrapDialog.confirm({
				title: '提示',
                message: '你确定要删除吗?',
                btnCancelLabel: '取消',
                btnOKLabel: '确定',
                callback: function(resultDel) {
                    if(resultDel === true) {
						$li.x_delimg();	//删除图片
						uploader.removeFile( file,true );//取消上传
						$("input[name='litpic']").val('');
					    $('#uploader-btn').show();
                    }
				}
			})

		})
        $list.append( $li );
        uploader.makeThumb( file, function( error, src ) {	// 创建缩略图
            if ( error ) {
                $img.replaceWith('<span>不能预览</span>');
                return;
            }
            $img.attr( 'src', src );
        }, thumbnailWidth, thumbnailHeight );
    	if($('#uploader-imglist img').length >= sc_num){	//隐藏上传按钮
    		$('#uploader-btn').hide();
    	}
    });

    //当文件被加入队列之前触发
    uploader.on( 'beforeFileQueued', function( file) {
    	if($('#uploader-imglist img').length == sc_num){
    		xzyn.msg('只可以上传'+ sc_num +'张图片');
    		return false;
    	}
    });

    // 当文件上传成功时触发。
    uploader.on( 'uploadSuccess', function( file,data) {
    	$("input[name='litpic']").val(data.url);
        $( '#'+file.id +' img').attr({'src':data.url,width:'100',height:'100'});
    });

    // 当文件上传出错时触发。
    uploader.on( 'uploadError', function( file,reason ) {
        var $li = $( '#'+file.id ),
            $error = $li.find('div.error');
        // 避免重复创建
        if ( !$error.length ) {
            $error = $('<div class="error"></div>').appendTo( $li );
        }
        $error.text('上传失败');
    });

    // 当所有文件上传结束时触发。
    uploader.on( 'uploadFinished', function( file,data) {
        $('.submits').click();  //提交保存
    });

    $('.shangchuan').click(function(){
    	uploader.upload();	//开始上传
    })

	if( '{$user['id']}' == ''){	//判断是否登录
		poplogin();
	}

	if( '{$titles}' == '编辑' && '{$data["litpic"]}' != ''){
		$('#uploader-imglist').off('click', '.scimg');
		$('#uploader-imglist').on('click', '.scimg', function() {
			var _this = $(this);
			BootstrapDialog.confirm({
				title: '提示',
                message: '你确定要删除吗?',
                btnCancelLabel: '取消',
                btnOKLabel: '确定',
                callback: function(resultDel) {
                    if(resultDel === true) {
	                   	var fid = _this.data('fid');
                    	$('#'+fid).x_delimg();	//删除图片
                    }
				}
			})
		});
	}



})



</script>

{/block}